<!--直播页面往期回看-->
<template>
	<div class="liveback" ref="liveback">
		<div class="header-nav">
			<ul v-if="tabIsShow">
				<li  @click="getLiveBackData(index,v.id)" :class="{active:cur==index}" v-for="(v,index) in  navTitle" :key="index">
					<p >{{v.title}}</p>
				</li>
			</ul>
			<div class="liveback-connect-box">
				<!-- <div class="liveback-connect" v-for="v of  liveBackData" @click="clickLookBack(v.id)">
					<img class="connect-img" :src="v.preImagUrl" />
					<div class="img-videoimg"></div>
					<p class="connect-p">{{v.title }}</p>
				</div> -->
				<VideoInline :list="liveBackData" :preImagUrl='isPreImagUrl'></VideoInline>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
//				navTitle: ["金融服务", "跨境服务", "生活服务", "中行风采"],
				navTitle: [],
				cur: 0,
				liveBackData: [],
				pushLiveBackData:[],
				ownerid: this.$route.params.ownerid, // 主播id
				flag:true,
				page:1,
                id:"",
				tabIsShow:false,
				isPreImagUrl:true,
				tabClearTime:"",
			}
		},
    created:function(){
      //this.$store.dispatch('setRoomTab', 2)
      this.$store.dispatch("hideNav");
      this.$store.dispatch("isBoxTrue");
      this.getLiveBackTitle()
      let tab = this.$lockr.get("roomBackTab"+this.$route.params.ownerid)
      if(tab){
        this.cur = tab
      }
     
    },
    activated:function () {
  	  //this.$store.dispatch("setRoomTab", 2);
  	  var TabArray; 
  	      if(sessionStorage.getItem("liveNavtable")){
  	      	TabArray =JSON.parse(sessionStorage.getItem("liveNavtable")) 
  	      }else{
  	      	TabArray = this.$store.state.liveNavTabArray
  	      }
			for (var i = 0  ;i<TabArray.length;i++) {
				if(TabArray[i].type == 2){
					this.$store.dispatch("setRoomTab", ++i)
				}
			}
},
mounted() {
		let _this = this;
		_this.$refs.liveback.onscroll = function() {
			let scrollTop = _this.$refs.liveback.scrollTop //198
			let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //667
			let scrollHeight = _this.$refs.liveback.scrollHeight; //563
			//console.log("scrollTop:"+scrollTop+"windowHeight:"+windowHeight+"scrollHeight:"+scrollHeight)
			//_this.flag = false;
			if((scrollTop + scrollHeight +6) >= windowHeight && _this.flag) { //198 + 563 = 661       667
				//console.log(1111)
				_this.flag = false;
		   		_this.tabClearTime = setTimeout(function () {
					_this.flag = true;
				},500)
				_this.page++
						_this.$http.get('/h5live/getRoomVideoList?p=' + _this.page + '&type=' + _this.id+'&anchor='+_this.ownerid ).then((res) => {
							if(res.data.code == '000000') {
								//_this.liveBackData = res.data.data;
								//console.log(res.data.data);
								_this.pushLiveBackData = res.data.data
								if(!res.data.data.length){
									clearTimeout(_this.tabClearTime)
									_this.flag = false;
								}
								for(var i = 0; i < _this.pushLiveBackData.length; i++) {
									_this.liveBackData.push(_this.pushLiveBackData[i]);
								}
								//console.log(_this.liveBackData)
							}
						}, (err) => {
							console.log(err);
						})				
			}
		}
	},
	methods: {
		//跳转回看页面
		clickLookBack(id){
			this.$router.push({
		        path: `/${this.$channel}/lookBack_particulars/${id}`
		    });
		},
		actTab(tab, id) {
			this.cur = tab
			this.$lockr.set("roomBackTab"+this.$route.params.ownerid,tab)
      },
      //直播间回看视频列表table nav
      	getLiveBackTitle() {
				let _this = this;
				_this.$http.get('/h5live/getRoomVideoType?anchor='+_this.ownerid).then((res) => {
					//console.log(res.data.data);
					if(res.data.code == '000000') {
//						res.data.data = [{
//							"id": 39,
//							"title": "视频1",
//							"crtTime": "2019-01-04 08:55:20",
//							"uptTime": "2019-01-04 08:55:20",
//							"creator": "gd0002",
//							"ordernum": null
//						}, {
//							"id": 40,
//							"title": "视频2",
//							"crtTime": "2019-01-04 08:55:26",
//							"uptTime": "2019-01-04 08:55:26",
//							"creator": "gd0002",
//							"ordernum": null
//						}]

						if(res.data.data.length==0  || res.data.data.length==1 ){		
							_this.tabIsShow = false;
							_this.$http.get('/h5live/getRoomVideoList?p=1'+'&anchor='+_this.ownerid ).then((res) => {
								if(res.data.code == '000000') {
									_this.liveBackData = res.data.data;
								}
								}, (err) => {
										console.log(err);
								})
						}else {
							_this.tabIsShow = true;
							_this.navTitle = res.data.data;//console.log(res.data.data[0].id)
						  _this.id = res.data.data[0].id
						  _this.getLiveBackData(0,res.data.data[0].id)
						}
	                   
					}
				}, (err) => {
					console.log(err);
				})
			},
			//直播间往期回看
			getLiveBackData(index,id) {
				let _this = this;
				_this.cur = index
				_this.flag = true
				_this.id = id
				_this.page = 1
				_this.liveBackData = []
				_this.$http.get('/h5live/getRoomVideoList?p=1'+'&type='+id+'&anchor='+_this.ownerid ).then((res) => {
					//console.log(res.data);
					if(res.data.code == '000000') {
						_this.liveBackData = res.data.data;
						//console.log(_this.liveBackData)
					}
				}, (err) => {
					console.log(err);
				})
			},
			
		}
	}
</script>

<style scoped="scoped">
	.liveback {
		width: 100%;
		height: calc(100vh - 564px);
		background: white;
		position: absolute;
		padding: 20px 0;
	    top: 585px;
	    left: 0px;
	    overflow-y:scroll ;
	    /*background: url(../assets/images/msgBg.png) no-repeat;*/
	}
	.liveback-connect-box{
		overflow-y: scroll;
		padding-bottom: 150px;
	}
 .header-nav>ul {
		width: 96%;
		margin: 0 auto;
		display: flex;
		display: -webkit-flex;
		border-radius: 30px;
		border: 2px solid #deddde;
	}
	.header-nav{

	}
	.header-nav ul li {
		width: 100%;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 24px;
		color: #999;
	}

	.header-nav ul .first {
		border-radius: 30px 30px;
	}

	.active {
		background: rgb(204,53,56);
		color: white !important;
		border-radius: 60px;
	}
	/*
	.liveback-connect {
		width: 48%;
		display: inline-block;
		margin: 20px  0;
		position: relative;
		background: rgba(247,247,247,0.5 );
		border-radius: 15px;
	}
  .liveback-connect:nth-child(2n+1){
  	margin-right: 18px;
  }
	.connect-img {
		width: 100%;
		height: 196px;
		border-radius: 15px;
	}
	.connect-p {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		line-height: 38px;
		padding: 15px 0px 20px 0px;
		text-indent: 20px;
	}
		.img-videoimg {
		width: 66px;
		height: 66px;
		background: pink;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -48px;
		margin-left: -32px;
		background: url(/static/img/icon2.6fa8c0b.png) no-repeat;
		background-size: 150px 288px;
		background-position: 0px -106px;
	} */
</style>
